<template>
	<div class="payradio">
		<div class="title">
			<h2>精品推荐
			<span>你值得拥有的优质内容</span></h2>

			<p>全部精品</p>
		</div>
		<div class="Playlist">
			<div @click="radiodetail(item.id)" class="musicList" v-for="(item,index) in paylist" :key="item.id">
				<div class="imgbox">
					<img :src="item.picUrl" alt="" />
					<h6>付费精品</h6>
				</div>
				
				<p>{{item.rcmdText}}</p>
				<span>￥{{item.originalPrice.toString().substring(0,item.originalPrice.toString().length-2)}}</span>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: "playlist",

		data() {
			return {
				paylist: []
			}
		},

		created() {
			this.$http.get("/dj/paygift", {
				params: {
					limit: 3
				}
			}).then(res => {
				this.paylist = res.data.data.list
			})
		},
		methods:{
			radiodetail(id){
				this.$router.push({
					name:"show",
					query:{
						ids:id
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.payradio {
		background: #fff;
		background: linear-gradient(top, #fbf3dd, #fff);
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: vw(16) vw(16);
			h2 {
				font-size: vw(16);
				span {
					font-size: vw(10);
					color: #999;
					font-weight: normal;
				}
			}
			p {
				font-size: vw(10);
				border: 1px solid #ddd;
				border-radius: vw(10);
				padding: vw(4) vw(6);
			}
		}
		.Playlist {
			display: flex;
			flex-wrap: wrap;
			padding: 0 vw(16);
			.musicList {
				width: 32%;
				margin-right: vw(4);
				.imgbox {
					width: 100%;
					height: vw(110);
					overflow: hidden;
					border-radius: vw(5);
					position: relative;
					img {
						width: 100%;
					}
					h6 {
						position: absolute;
						top: 0;
						left: 0;
						color: white;
						font-size: vw(10);
						border-bottom-right-radius: vw(4);
						padding: vw(3);
						background-color: red;
					}
				}
				p {
					margin: vw(6) 0 0;
					color: #666;
					font-size: vw(12);
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				span {
					font-size: vw(11);
					color: red;
				}
			}
			
		}
	}
</style>